import { initState } from "./initState";
import { compileToFunction } from "./compile/index";
import { callHook, mountedComponent } from "./compile/lifecycle";
import { mergeOptions } from "./utils/index";

export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    // console.log(options);
    let vm = this;

    // console.log(vm);
    // console.log(Vue.options, options);
    vm.$options = mergeOptions(Vue.options, options);
    callHook(vm, "beforeCreated");
    initState(vm);
    callHook(vm, "created");
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
  // 创建 $mount
  Vue.prototype.$mount = function (el) {
    // console.log(el, "ek");

    let vm = this;
    el = document.querySelector(el);
    vm.$el = el;
    let options = vm.$mount;
    if (!options.render) {
      let template = options.template;
      if (!template && el) {
        //获取HTML
        el = el.outerHTML;
        let render = compileToFunction(el);
        // console.log(render);
        // (1)将render  函数变成vnode  （2）vnode  变成真是dom  放到页面上去

        vm.$options.render = render;
      }
    }
    //挂载组件
    // console.log(vm,el);
    mountedComponent(vm, el);
  };
}
// ast语法树 是对象，什么都可以操作（css、html、js）     vnode 是对象，只能操作接节点
